<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"></meta>
    <title>分类管理</title>
    <meta name="description" content="个人后台管理系统"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1"></meta>

    <link rel="stylesheet" type="text/css" href="/css/main.css"></link>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css"></link>
</head>
<body class="app sidebar-mini rtl">
<!-- Navbar-->
<div th:replace="common/html/back::header"></div>
<!-- Sidebar menu-->
<div th:replace="common/html/back::sidebar"></div>
<main class="app-content">
    <div class="app-title">
        <div>
            <h1><i class="fa fa-th-list"></i> 分类管理</h1>
            <p>分类管理相关功能</p>
        </div>
        <ul class="app-breadcrumb breadcrumb side">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item">博客管理</li>
            <li class="breadcrumb-item">分类管理</li>
        </ul>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="tile">
                <div class="tile-body">
                    <table class="table table-hover table-bordered" id="sampleTable" style="white-space:nowrap">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>分类名称</th>
                            <th>上级分类ID</th>
                            <th>排序号</th>
                        </tr>
                        </thead>
                    </table>
                    <div class="btn-group" style="display:none" shiro:hasPermission="category:add, category:update, category:delete">
                        <button id="add" type="button" class="btn btn-default btn-success"><i class="fa fa-plus-circle"></i>增加</button >
                        <button id="update" type="button" class="btn btn-default btn-info"><i class="fa fa-pencil-square-o"></i>修改</button >
                        <button id="delete" type="button" class="btn btn-default btn-danger"><i class="fa fa-trash-o"></i>删除</button >
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<!-- Essential javascripts for application to work-->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.3/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="/js/main.js"></script>
<!-- The javascript plugin to display page loading on top-->
<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
<!-- Data table plugin-->
<script type="text/javascript" src="https://cdn.bootcss.com/datatables/1.10.5/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="/js/plugins/dataTables.bootstrap.min.js"></script>
</body>
<script type="text/javascript" th:inline="javascript">
      /*<![CDATA[*/
        var table = $('#sampleTable').DataTable({
            "sDom" : '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>rt<"row"<"col-sm-12 col-md-6 crudBtn"><"col-sm-12 col-md-6"p>><"clear">',
            sScrollx : "100%",
            bAutoWidth: false,
            bServerSide : true,//开启后台分页功能
            fnServerData: retrieveData, //执行函数
            bPaginate : true,//显示分页按钮
            sAjaxSource : "/back/category/getData",//请求url
            aoColumns : [{"mDataProp": "id", "sDefaultContent": ""},
                         {"mDataProp": "categoryName", "sDefaultContent": ""},
                         {"mDataProp": "parentCategory.categoryName", "sDefaultContent": "0","bSortable": false},
                         {"mDataProp": "sort", "sDefaultContent": ""}
                        ],
            "language": {
              "lengthMenu": "每页 _MENU_ 条记录",
              "zeroRecords": "没有找到记录",
              "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )  显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
              "infoEmpty": "无记录",
              "infoFiltered": "(从 _MAX_ 条记录过滤)",
              "search": "搜索",
              "oPaginate": {
                  "sFirst": "首页",
                  "sPrevious": "上页",
                  "sNext": "下页",
                  "sLast": "末页"
              },
              "oAria": {
                  "sSortAscending": ": 以升序排列此列",
                  "sSortDescending": ": 以降序排列此列"
              }
            },
        });
      $("#sampleTable tbody").on("click", "tr", function(){
          $(this).toggleClass("success");
          //var length = table.rows(".danger").data().length;
      });

      $("div.crudBtn").html($(".btn-group").html());

      $("#add").bind("click",function(){
          window.location.href = "/back/category/input";
      });

      $("#update").bind("click",function(){
          var data = table.rows(".success").data();
          if(data.length >1){
            layer.msg("最多选择一行，请重新选择");
            return;
          }
          if(data.length == 0){
            layer.msg("请选择指定元素进行修改");
          }
          var titleId = data[0].id;
          window.location.href = "/back/category/input?id="+titleId;
      });

      $("#delete").bind("click", function(){
            var data = table.rows(".success").data();//选中的DataTable对象数组
            if(data.length == 0){
                layer.msg("至少选择一行");
                return;
              }
            var result = layer.confirm('确认删除?', {icon: 3, title:'删除记录'}, function(index){
              //do something
              var buf = [];
              for(var i = 0; i < data.length; i++){
                  buf.push(data[i].id);
              }
              $.ajax({
                  url:"/back/category/delete",
                  type:"post",
                  data:{"ids": buf.toString()},
                  dataType:"json",
                  success:function(result){
                      if(result.result == 1){//删除成功
                          layer.msg("删除成功");
                          setInterval("sleep()", 500);
                      }else if(result.result == 0){//删除失败
                          layer.close(index);
                          layer.msg("删除失败");
                      }
                  }
              });
            });
      });

      function sleep(){
          location.reload();
      }

      function retrieveData(sSource, aoData, fnCallback) {
          console.log(JSON.stringify(aoData));
          $.ajax({
              url: sSource,
              data: {"aoData" : JSON.stringify(aoData)},
              type: "post",
              dataType: "json",
              async: false,//异步与否，待测试
              success: function(result){
                    fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
              },
              error: function(msg){
                    alert("表格信息获取失败！！");
              }
          });
      }
      /*]]>*/
    </script>
</html>